<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue';
    import API from '@/services';
    import {debounce} from 'lodash'
    import MetricsTreeIcon from '@/assets/images/metrics_tree_icon.svg';
    const loading = ref<boolean>(false)
    const collectIndex = ref<defs.FavoriteMetricsVO[]>()
    const currentIndex = ref<number>()
    const emit = defineEmits(['handleIndex'])
    const getCollectIndex = async () => {
        try {
            loading.value = true
            const {code, data} = await API.favoriteMetrics.getFavoriteMetrics()
            loading.value = false
            if (code === 200) {
                collectIndex.value = data
            }
        } catch (error) {
            loading.value = false
        }
    }
    const handleCurIndex = debounce((v:any, i:number) => {
        v.type = 'indexCard'
        v.children = []
        currentIndex.value = i
        v.metricsName = v.cnName
        v.metricsId = v.id
        emit('handleIndex', v)
    }, 2000, {
        'leading': true,
        'trailing': false
    })
    onMounted(() => {
        getCollectIndex()
    })

</script>

<template>
    
    <a-spin
        style="
            display: block;
            height: 100%;
            overflow-y: auto;
            background-color: #fff;
        "
        :loading="loading"
    >
        <div class="collect overflow-auto">
            <div
                :class="['collect-index', {active: index===currentIndex}]" 
                v-for="(item, index) in collectIndex"
                @click="(e:any) => {
                    e.preventDefault()
                    e.stopPropagation()
                    handleCurIndex(item, index)
                }"
            >
                <span class="collect-index-name">
                    <img class="metricsIcon" :src="MetricsTreeIcon" alt="" />
                    {{item.cnName}}
                </span>
            </div>
        </div>
    </a-spin>
    

</template>
<style lang="scss" scoped>
.metricsIcon {
    width: 10px;
    height: 10px;
    vertical-align: initial;
}
@import './index.scss'
</style>